<template>
  <div class="d-flex justify-content-center mt-3">
    <div class="login  col-lg-6 col-12 bg-white pt-3">
        <form>
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text" >邮箱：</span>
            </div>
             <input type="text" class="form-control" v-model="qqEmail" placeholder="输入邮箱地址">
          </div>
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text" >昵称：</span>
            </div>
             <input type="text" class="form-control" v-model="nick" placeholder="你的昵称">
          </div>
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text" >密码：</span>
            </div>
             <input type="password" class="form-control" v-model='password' placeholder="你的密码">
          </div>
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text" >再次输入密码：</span>
            </div>
             <input type="password" class="form-control" v-model='againPassword' placeholder="再次输入你的密码">
          </div>
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text" >验证码：</span>
            </div>
            <input type="text" class="form-control" v-model="checkCode">
            <div class="input-group-append">
              <button  class="input-group-text" @click="sendCode" v-if="time<=0">发送验证码</button>
              <span class="input-group-text" v-else>{{time}}s后可再次发送</span>
            </div>
          </div>
          <div class="input-group d-flex justify-content-center p-3">
             <button type="button" class="btn btn-primary mr-2" @click="register">注册</button>
             <button type="button" class="btn btn-primary" @click="toLogin">登录</button>
          </div>

        </form>
    </div>
  </div>
</template>

<script>
 export default {
   data () {
     return {
      time:0,
      qqEmail:'',
      nick:'',
      password:'',
      againPassword:'',
      checkCode:'',
     }
   },
   components: {

   },
   methods:{
     toLogin(){
        this.$router.push({path:'/homePage/login'});
     },
     sendCode(){
       this.$axios.get(this.$url+"emailRegister?emailCount="+this.qqEmail).then(res=>{
                 this.$message({
                     type: 'info',
                     message: `发送成功`
                 });
       })
     },
     //注册按钮
     register(){

       if(this.password==this.againPassword){
           this.$axios.get(this.$url+"canRegister?checkCode="+this.checkCode).then(res=>{
             console.log(res.data);
             //验证码正确
             if(res.data.data.res==1){
               this.$axios.post(this.$url+"register",{email:this.qqEmail,password:this.password,nick:this.nick,}).then(res=>{
                         console.log(res.data.data);
                         this.$message({
                             type: 'info',
                             message: `注册成功`
                         });
                         this.toLogin();
               })
             }else{
               this.$message({
                   type: 'info',
                   message: `验证码错误`
               });
             }

           })
       }
     }
   }
 }
</script>

<style scoped lang='less'>


</style>
